<template>
  <div class="monitoring">
    <el-form ref="form" :model="form" label-width="95px">
      <el-form-item label="公厕名称 " style="width: 300px">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="公厕类型" style="width: 250px">
        <el-select
          v-model="form.toiletTypeValue"
          :options="selectToiletType"
          placeholder="请选择公厕类型"
        >
          <el-option
            v-for="(item, index) in selectToiletType"
            :value="item.label"
            :label="item.label"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="建筑类别" style="width: 200px">
        <el-select
          v-model="form.toiletGCLBValue"
          :options="selectToiletGCLB"
          placeholder="请选择建筑类别"
        >
          <el-option
            v-for="(item, index) in selectToiletGCLB"
            :value="item.label"
            :label="item.label"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <span style="margin-left: 15px;font-size: small;">公厕数量：{{this.carNum}}个</span>
      <el-button
        size="mini"
        type="primary"
        @click="screenData"
        style="margin-left: 15px"
        >查 询</el-button
      >
      <el-button
        class="iconfont icon-daochu iconone"
        size="mini"
        style="background-color: green; color: #fff; border: 0 none"
        @click="exportExcel"
        >导出实时信息表</el-button
      >
    </el-form>
    <!-- 人员信息列表 -->
    <div class="table_list">
      <el-table
        :data="screeningData"
        :header-cell-style="{ height: '35px' }"
        height="100%"
        style="width: 100%"
        size="mini"
        border
        fit
        highlight-current-row
        @row-contextmenu="rowHandle"
        @row-dblclick="dblClickRow"
      >
        <el-table-column prop="VID" label="编号" width="90"></el-table-column>
        <el-table-column prop="NAME" label="公厕名称" width="150"></el-table-column>
        <el-table-column prop="LOCATION" label="公厕位置" width="190"></el-table-column>
        <el-table-column prop="LEVEL" label="建筑类别" width="100"></el-table-column>
        <el-table-column prop="TYPE" label="公厕类型" width="150"></el-table-column>
        <el-table-column prop="TIME" label="开放时间" width="150"></el-table-column>
        <el-table-column prop="MNUM" label="男蹲位总数" width="120"></el-table-column>
        <el-table-column prop="MSNUM" label="男蹲位剩余数" width="140"></el-table-column>
        <el-table-column prop="FNUM" label="女蹲位总数" width="120"></el-table-column>
        <el-table-column prop="FSNUM" label="女蹲位剩余数" width="140"></el-table-column>
        <el-table-column prop="PERSON" label="正在维保人员" width="140"></el-table-column>
        <el-table-column prop="STATUS" label="缺纸情况" width="120"></el-table-column>
      </el-table>
    </div>
    <!-- 右键人员列表菜单 -->
    <div
      class="row_box"
      v-if="MouseEvent.isShow"
      :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
    >
      <span @click="exportRowExcel">导出Excel</span>
      <!-- <span @click="groupArea(teamNumber)">负责区域</span> -->
      <!-- <span @click="clearArea(teamNumber)">清扫队负责区域</span> -->
      <!-- <span>负责区域</span> -->
      <!-- <span @click="cleanArea">清除区域</span> -->
      <!-- <span @click="trajectory">轨迹回放</span>
      <span @click="showCCTV">视频监控</span> -->
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

import export2Excel from '@/utils/exportExcel/index.js'
// 转换地图坐标
// import { getLatLng } from '@/assets/js/pointtransfertools.js'

// import { BMap } from 'vue-baidu-map'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  data () {
    return {
      timeID: '',
      // 筛选条件
      form: {
        name: '',
        groupingValue: '',
        statusValue: '全部',
        toiletTypeValue: '全部',
        toiletGCLBValue: '全部',
        carTypeValue: '全部'
      },

      // 原始数据
      originalData: [],
      // 筛选数据
      screeningData: [],
      screeningDataString: '',
      //查询出来的车辆数
      carNum:0,
      // 自动刷新
      switch_value: true,
      // groupingList: [],
      selectToiletType: [{
        value: '全部',
        label: '全部'
      }, {
        value: '独立式公厕',
        label: '独立式公厕'
      }, {
        value: '附建式公厕',
        label: '附建式公厕'
      }, {
        value: '移动式公厕',
        label: '移动式公厕'
      }],
      selectToiletGCLB: [{
        value: '全部',
        label: '全部'
      }, {
        value: '一类',
        label: '一类'
      }, {
        value: '二类',
        label: '二类'
      }, {
        value: '三类',
        label: '三类'
      }, {
        value: '其他',
        label: '其他'
      }],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      // 右键表格
      row: null,
    }
  },
  mounted () {
    // this.getGroupingList()
    this.getInfoList()
    // this.selectChange()
  },
  methods: {
    // 获得分组列表
    // async getGroupingList () {
    //   var url = 'WC/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
    //   let { data } = await this.$Http.get(url)
    //   this.groupingList = data
    // },
    // 自动查询
    selectChange () {
      // let timeId = null
      if (this.switch_value) {
        var that = this
        this.timeID = setInterval(() => {
          that.getInfoList()
          // that.realtimeOnlineStatistics()
          if (!that.switch_value) clearInterval(that.timeID)
        }, 120000)
      }
    },
    // 获取人员信息列表
    async getInfoList () {
      var url = 'WC/GetToiletInfo?CLIENTNO=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      this.originalData = data
      this.screenData()
    },
    screenData () {
      let { name, groupingValue, statusValue, toiletTypeValue, toiletGCLBValue } = this.form
      // this.currentPage = 1;
      this.screeningData = [];
      // this.tableData = this.originalData
      // if (this.select.name) this.tableData = this.tableData.filter(item => item.NAME.includes(this.select.name))
      // console.log(this.select.name)
      var listDuli = [], listFujian = [], listYidong = [];
      this.originalData.forEach(item => {
        if (!item.NAME.includes(name)) {
          return;
        }
        if (toiletTypeValue !== '全部' && item.TYPE != toiletTypeValue) {
          return;
        }
        if (toiletGCLBValue === '其他') {
          if (item.LEVEL === '一类' || item.LEVEL === '二类' || item.LEVEL === '三类') {
          return;
          }
        }else if (toiletGCLBValue !== '全部' && item.LEVEL != toiletGCLBValue) {
          return;
        }
        switch (item.TYPE) {
            case '独立式公厕':
              item.img = 'duli'
              listDuli.push(item);
              break;
            case '附建式公厕':
              item.img = 'fujian'
              listFujian.push(item);
              break;
            case '移动式公厕':
              item.img = 'yidong'
              listYidong.push(item);
              break;
          }
          this.screeningData.push(item);
      });
      this.carNum = this.screeningData.length
      eventBus.$emit('mapData_Toilet', [listDuli, listFujian, listYidong])
      eventBus.$emit('mapData_Toilet_count', this.screeningData.length)
    },
    // 筛选数据
    // screenData () {
    //   let { name, groupingValue, statusValue, carTypeValue } = this.form
    //   // if (statusValue === '在线') statusValue = '0'
    //   // if (statusValue === '离线') statusValue = '6'
    //   if (name) {
    //     this.screeningData = this.originalData.filter(item => item.NAME.includes(name))
    //   } else {
    //     this.screeningData = this.originalData
    //   }
    //   var arrayVID = []
    //   this.screeningData.forEach(element => {
    //     arrayVID.push(element.VID)
    //   });
    //   //因为公厕位置不会变，所以在此比较公厕数组是否有改变，如果没有，不调用地图方法
    //   // if (arrayVID.sort().toString() != this.screeningDataString) {
    //     eventBus.$emit('mapData_Toilet', this.screeningData)
    //     // this.screeningDataString = arrayVID.sort().toString()
    //   // }
    // },
    // 双击表格某一行
    dblClickRow (row) {
      eventBus.$emit('mapDBrowToilet', row)
    },
    // 右键表格某一行
    rowHandle (row, column, event) {
      window.event.returnValue = false
      this.row = row
      this.MouseEvent.left = event.clientX
      this.MouseEvent.top = event.clientY - 26 * 2

      this.MouseEvent.isShow = true
      // this.teamNumber = row.CLIENT_NO
    },
    // 右键导出Excel
    exportRowExcel () {
      this.MouseEvent.isShow = false
      const excelName = this.row.NAME + '-信息'
      const tHeader = ['编号', '公厕名称', '公厕位置', '建筑类别', '公厕类型', '开放时间', '男蹲位总数', '男蹲位剩余数', '女蹲位总数', '女蹲位剩余数', '正在维保人员', '缺纸情况']
      const filterVal = ['VID', 'NAME', 'LOCATION', 'LEVEL', 'TYPE', 'TIME', 'MNUM', 'MSNUM', 'FNUM', 'FSNUM', 'PERSON', 'STATUS']
      let ary = []
      ary.push(this.row)
      export2Excel(tHeader, filterVal, ary, excelName)
    },
     // 导出Excel
    exportExcel () {
      let excelName = ''
      if (!document.querySelector('.group li.selected span')) {
        excelName = '公厕实时信息列表'
      } else {
        excelName = document.querySelector('.group li.selected span').innerText + '-信息'
      }
      const tHeader = ['编号', '公厕名称', '公厕位置', '建筑类别', '公厕类型', '开放时间', '男蹲位总数', '男蹲位剩余数', '女蹲位总数', '女蹲位剩余数', '正在维保人员', '缺纸情况']
      const filterVal = ['VID', 'NAME', 'LOCATION', 'LEVEL', 'TYPE', 'TIME', 'MNUM', 'MSNUM', 'FNUM', 'FSNUM', 'PERSON', 'STATUS']
      export2Excel(tHeader, filterVal, this.screeningData, excelName)
    }
  },
  beforeDestroy () {
    clearInterval(this.timeID)
  }
}
</script>

<style scoped lang="less">
.monitoring {
  .el-form-item__content {
    max-width: 100px;
  }
  height: 100%;
  // position: relative;
  .el-form {
    width: 100%;
    height: 40px;
    line-height: 40px;
    // display: flex;
    // align-items: center;
    overflow: hidden;
    // border-bottom: 2px solid #007ACC;
    .el-form-item {
      // float: left;
      display: inline-block;
      margin: 0;
      // flex-shrink: 0;
      .el-input {
        height: 22px;
      }
    }
    .el-button {
      padding: 0 5px;
      height: 28px;
      border-radius: 2px;
      display: inline-block;
      /deep/span {
        font-size: 14px;
        // margin-left: 4px;
        line-height: 22px;
      }
    }
    .people_number {
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      color: #333;
      // float: left;
      display: inline-block;
      // flex-shrink: 0;
      span {
        display: inline-block;
        padding: 0 2px;
        height: 30px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
      }
    }
    .switch {
      display: inline-block;
      min-width: 100px;
      // height: 40px;
      // line-height: 40px;
      margin-left: 10px;
      // float: left;
      // flex-shrink: 0;
      span {
        margin-right: 2px;
        cursor: default;
        color: #606266;
      }
      .el-select {
        max-width: 100px;
        height: 22px;
        margin-left: 5px;
        /deep/.el-input__suffix {
          top: 8px;
          line-height: 24px;
        }
      }
    }
    .el-button {
      flex-shrink: 0;
    }
  }
  @media screen and (min-width: 1600px) {
    .fold_btn {
      opacity: 0;
    }
  }
  @media screen and (max-width: 1660px) {
    .el-form {
      width: 100%;
    }
    .fold_btn {
      display: inline-block;
    }
  }
  // @media screen and (min-width: 1455px) {

  // }
  @media screen and (max-width: 1455px) {
    .iconone {
      display: none !important;
    }
  }
  .fold_btn {
    position: relative;
  }
  .fold_btns {
    position: absolute;
    top: 65px;
    right: 0;
    width: auto;
    height: auto;
    overflow-y: scroll;
    background: #fff;
    z-index: 1111111;
    display: none;
  }
  .buttons {
    z-index: 55555;
    width: 80px;
    height: 120px;
    background: #eee;
  }
  .table_list {
    // position: absolute;
    // top: 70px;
    // bottom: 0px;
    margin-left: 20px;
    overflow-y: auto;
    width: calc(~'100% - 40px');

    height: calc(~'100% - 110px');
    .el-table {
      height: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~'100% - 34px');
      overflow-y: auto;
    }
  }
}
// .icon-kaishi .icon-kaishi:hover{
//   background: #60a53e!important;
//   color: #eee;
// }
// .icon-tingzhi .icon-tingzhi:hover{
//   background: #cc8c8c!important;
//   color: #eee;
// }
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
// .row_box {
//   width: 120px;
//   // height: 130px;
//   color: #666;
//   background-color: #f3f3f3;
//   border: 1px solid #ccc;
//   position: fixed;
//   span {
//     display: block;
//     text-align: center;
//     line-height: 26px;
//     cursor: default;
//     &:hover {
//       color: #fff;
//       background-color: #007ACC;
//     }
//   }
// }
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    max-height: 350px;
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
</style>
